<template>
    <div class="list">
        <div class="tab" :class="{active: currentIndex==index }" @click="$emit('deliverIndex',index)" v-for="(item,index) in tabs" :key="index">{{item.tabName}}</div>
    </div>
</template>

<script>
export default {
    props: ['tabs','currentIndex']
}
</script>

<style lang="scss" scoped>
html,body{
    width: 100%;
    height: 100%;
}
.list{
    width: 60px;
    padding: 10px;
    background: #f5f5f5;
    position: absolute;
}
.list .tab{
    margin: 25px 0;
    box-sizing: border-box;
}
.tab.active{
  font-weight: bold;
  border-left: 2px solid red;
}
</style>